<template>
  <div class="report-card">
    <div class="report-item" v-for="item in reportList" v-bind:key="item.id">
      <div
        class="report-progress"
        :class="{ ['yes']: item.status === '已完成' }"
        v-if="item.status === '已预约' || item.status === '已完成'"
      >
        <span class="status"
          ><span class="btn">{{ item.status }}</span></span
        >
        <div class="info">
          <span class="title">{{ item.title }}</span>
          <span class="desc">{{ item.desc }}</span>
        </div>
        <div class="contact">
          <span class="contact-text">
            <span class="icon"> account_circle </span>
            {{ item.address }}
          </span>
          <span class="contact-text">
            <span class="icon"> call </span>
            {{ item.user }}
          </span>
          <span class="contact-text">
            <span class="icon"> mail </span>
            {{ item.phone }}
          </span>
        </div>
        <div class="img">
          <img src="../../assets/images/equ-demo.png" alt="" />
        </div>
      </div>
      <div class="report-in" v-else-if="item.status === '检查中'">
        <span class="status"
          ><span class="btn">{{ item.status }}</span></span
        >
        <div class="info">
          <span class="title">{{ item.title }}</span>
          <span class="desc">{{ item.desc }}</span>
        </div>
        <div class="contact">
          <span class="contact-text">
            <span class="icon"> account_circle </span>
            {{ item.address }}
          </span>
          <span class="contact-text">
            <span class="icon"> call </span>
            {{ item.user }}
          </span>
          <span class="contact-text">
            <span class="icon"> mail </span>
            {{ item.phone }}
          </span>
        </div>
      </div>
      <div
        :class="{ 'report-default': true, done: item.isFinish === 'done' }"
        v-else
      >
        <span class="status"
          ><span class="btn">{{ item.status }}</span></span
        >
        <div class="contact">
          <span class="title">{{ item.title }}</span>
          <span class="contact-text">
            <span class="icon"> account_circle </span>
            {{ item.address }}
          </span>
          <span class="contact-text">
            <span class="icon"> call </span>
            {{ item.user }}
          </span>
          <span class="contact-text">
            <span class="icon"> mail </span>
            {{ item.phone }}
          </span>
        </div>
        <div class="operate">
          <div class="operate-btn">edit</div>
          <div class="operate-btn">delete</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, toRefs } from 'vue'

const props = defineProps(['reportList'])
const { reportList = [] } = toRefs(props)

// const reportList = ref([
//   {
//     id: 1,
//     title: '热解有机碳；总有机碳；',
//     count: 2,
//     status: '检查中',
//     desc: '油，气 ｜ 邮寄',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   },
//   {
//     id: 1,
//     title: '双探头低真空场发射扫描电镜矿物扫描系统',
//     count: 2,
//     status: '已预约',
//     desc: 'Apreo,LoVac 30kv',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   },
//   {
//     id: 1,
//     title: '热解有机碳；总有机碳；',
//     count: 2,
//     status: '院内',
//     desc: '油，气 ｜ 邮寄',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   },
//   {
//     id: 1,
//     title: '热解有机碳；总有机碳；',
//     count: 2,
//     status: '默认',
//     desc: '油，气 ｜ 邮寄',
//     address: '北京石油地质实验研究中心',
//     user: '王晓蕾',
//     phone: '18615508558'
//   }
// ])
</script>

<style scoped lang="scss">
.report-card {
  width: dpi(70rem);
  // margin: 0 dpi(4rem);
  margin: dpi(4rem) auto;

  .report-item {
    position: relative;
    background-color: #ffffff;
    box-shadow: 0rem dpi(1rem) dpi(2rem) 0rem rgba(0, 0, 0, 0.05);
    &:not(&:last-child) {
      margin-bottom: dpi(6rem);
    }
    .status {
      position: absolute;
      top: 0;
      left: dpi(3rem);
      .btn {
        display: inline-block;
        color: #fff;
        font-size: dpi(2rem);
        padding: dpi(1rem) dpi(2rem);
        background-color: #0571b0;
      }
    }
    .title {
      margin-top: dpi(2rem);
      margin-bottom: dpi(4rem);
      font-family: PingFangSC-Semibold;
      font-size: dpi(3rem);
      color: #05204d;
    }
    .desc {
      font-family: PingFangSC-Regular;
      font-size: dpi(2rem);
      color: #05204d;
      opacity: 0.8;
    }
    .info {
      display: flex;
      flex-direction: column;
      min-height: dpi(16rem);
      padding-top: dpi(5rem);
      padding-left: dpi(3rem);
      padding-bottom: dpi(4rem);
    }
    .contact {
      display: flex;
      flex-direction: column;
      padding: dpi(4rem) dpi(3rem);
      font-family: PingFangSC-Medium;
      font-size: dpi(2rem);
      line-height: dpi(3rem);
      color: #565656;
      .contact-text {
        &:not(&:last-child) {
          margin-bottom: dpi(2rem);
        }
        .icon {
          font-family: 'Material Symbols Outlined';
          font-size: dpi(2rem);
          color: #05204d;
          opacity: 0.5;
        }
      }
    }
    .operate {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      &-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: dpi(6rem);
        height: dpi(4rem);
        border: solid 1px #dddddd;
        font-family: 'Material Symbols Outlined';
        font-size: dpi(2rem);
        color: #0571b0;
        &:not(&:last-child) {
          border-right: none;
        }
        &:nth-child(2) {
          color: #ff0000;
        }
      }
    }
  }

  .report-in {
    width: dpi(70rem);
    margin-bottom: dpi(4rem);

    .info {
      background-color: #f2f8fb;
    }
  }

  .report-default {
    width: dpi(70rem);
    min-height: dpi(25rem);
    .title {
      margin-top: dpi(3rem);
    }
  }

  .report-progress {
    position: relative;
    &.yes {
      // filter: blur(.8);
      filter: grayscale(100%);
      filter: gray;
      opacity: 0.5;
      cursor: not-allowed;
    }
    .title {
      width: dpi(30rem);
      margin-bottom: dpi(2rem);
      color: #ffffff;
    }
    .desc {
      color: #7fcfe2;
    }
    .info {
      padding-left: dpi(22rem);
      background-image: linear-gradient(180deg, #05204d 0%, #0571b0 100%);
      background-image: url('../../assets/images/equ-bg.png');
      background-size: cover;
    }
    .contact-text {
      padding-left: dpi(22rem);
    }

    .img {
      position: absolute;
      top: 50%;
      left: dpi(4rem);
      min-width: dpi(11rem);
      height: dpi(24rem);
      margin-top: dpi(-10rem);
      // background: red;
      > img {
        height: 100%;
      }
    }
  }
}
</style>
